<template>
  <PagePanel header="地图底板" bg-img="grid">
    <VisualDarkChart
      class="h-full"
      :loading="chartState.loading"
      :no-data="chartState.noData"
      :options="chartState.options"
    />
  </PagePanel>
</template>

<script lang="ts" setup>
import { PagePanel, VisualDarkChart } from '../components/index'

const chartState = reactive({
  loading: true,
  noData: false,
  options: {
    tooltip: {
      trigger: 'item',
    },
    geo: {
      map: 'china',
      zoom: 1.2,
    },
    visualMap: {
      max: 100,
      range: [1, 100],
    },
    series: [],
  },
})

setTimeout(() => {
  chartState.loading = false
  chartState.noData = false
}, 2000)
</script>
